<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <a href="#/zhuye">主页</a>
        <a href="#/keji">科技</a>
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>
        <!-- 组件展示位置 -->
        <component :is="comName"></component>
    </div>
    <script src="../js/vue.min.js"></script>
    <script>
        // 路由的本质是一种对应关系
        // 前端路由和后端路由
        // 后端路由：URL请求和服务器资源之间的对应关系，根据URL地址分发资源
        // 后端渲染存在性能问题，所以产生了ajax的前端渲染，能够更新网页局部内容，在不重新加载的情况下
        // ajax不能支持前进后退操作，所以产生了SPA单页面应用程序
        // SPA核心思想就是整个网页只有一个页面，内容变化通过ajax局部更新实现，支持前进后退
        // SPA实现原理：hash变化会使得浏览器访问历史改变、但不触发新的URL请求
        // 实现SPA的核心技术就是前端路由
        // 前端路由：用户事件和页面内容的对应关系，不同的用户事件显示不同的页面内容


        // 定义局部组件
        const zhuye = {
            template: '<h1>主页信息</h1>'
        };
        const keji = {
            template: '<h1>科技信息</h1>'
        };
        const caijing = {
            template: '<h1>财经信息</h1>'
        };
        const yule = {
            template: '<h1>娱乐信息</h1>'
        };

        const vm = new Vue({
                el: '#app',
                data: {
                    comName: 'zhuye'
                },
                // 局部组件挂载
                components: {
                    zhuye,
                    keji,
                    caijing,
                    yule
                },
            })
            // 监听window的onhashchange事件，根据获取的hash值,切换显示的组件名称
        window.onhashchange = function() {
            // location.hash能获取到最新的hash值
            switch (location.hash.slice(1)) {
                case '/zhuye':
                    vm.comName = 'zhuye';
                    break;
                case '/keji':
                    vm.comName = 'keji';
                    break;
                case '/caijing':
                    vm.comName = 'caijing';
                    break;
                case '/yule':
                    vm.comName = 'yule';
                    break;
            }
        }
    </script>
</body>

</html>